<template>
  <div class="card-box">
    <h1>无人机柔性模拟仿真系统 导调平台</h1>
    <p>通过本平台对于展示服务的状态进行显示，对于服务的任务进行控制</p>
    <div>
      <div class="card-box">
        <button @click="openRflySim3D">启动 监视窗口</button>
        &nbsp
        <button @click="closeRflySim3D">关闭 监视窗口</button>
        &nbsp
        <button @click="openQGC">启动 操作窗口</button>
        &nbsp
        <button @click="closeQGC">关闭 操作窗口</button>
      </div>
      <div class="card-box">
        <!--        <p>地图：{{ copterData.ueMap }} </p>-->
        <!--        <p>飞机：{{ copterData.title }} - {{ copterData.dllModel }} - {{ copterData.px4SitlFrame }}</p>-->
        <label for="selectMap">选择地图:</label>
        <select v-model="selectedOptionMap" id="selectMap">
          <option v-for="option in optionsMap" :key="option.value" :value="option.value">
            {{ option.text }}
          </option>
        </select>
        &nbsp
        <label for="selectUav">选择飞机:</label>
        <select v-model="selectedOptionUav" id="selectUav">
          <option v-for="option in optionsUav" :key="option.value" :value="option.value">
            {{ option.text }}
          </option>
        </select>
        &nbsp
        <label for="selectTask">选择任务:</label>
        <select v-model="selectedOptionTask" id="selectTask">
          <option v-for="option in optionsTask" :key="option.value" :value="option.text">
            {{ option.text.title }}
          </option>
        </select>
        &nbsp
        <button @click="execOpenCopterSim">进入任务</button>
        &nbsp
        <button @click="execCloseCopterSim">退出任务</button>
      </div>
      <div class="card-box">
        <button @click="execPythonPath2">切换地图</button>
        &nbsp
        <button @click="execPythonPath3">开启载荷控制</button>
      </div>
      <div class="card-box">
        <button @click="execPythonPath">执行Python脚本</button>
      </div>
    </div>

    <!--    <div>-->
    <!--      <h1>任务：在 {{ copterData.ueMap }} 使用 {{ copterData.title }} 进行 {{ selectedOptionTask.title }}</h1>-->
    <!--      <p>{{ selectedOptionTask.content }}</p>-->
    <!--    </div>-->
  </div>
</template>

<style scoped lang="scss">

</style>

<script>
import {
  execCloseCopterSim,
  execOpenCopterSim,
  execPythonPath,
  qgc_close,
  qgc_open,
  ue4_close,
  ue4_open
} from '@/api/rflysim/index'

export default {
  data() {
    return {
      pythonPath: {
        fileUrl: ''
      },
      inputValue: '',
      inputValue1: '',
      copterData: {
        title: '',
        dllModel: '0',
        px4SitlFrame: 'iris',
        uavType: '',
        ueMap: 'Changsha',
        originPosX: '10',
        originPosY: '10',
        originYaw: '0',
        udpSimMode: 'Mavlink_Full'
      },
      selectedOptionMap: '',
      optionsMap: [
        { value: 'Grasslands', text: '山地' },
        { value: 'MountainTerrain_Water', text: '海岛' },
        { value: 'MountainTerrain', text: '密林' },
        { value: 'DesertTown', text: '戈壁' },
        { value: 'OldFactory', text: '城市' }
      ],
      selectedOptionUav: '四旋翼',
      optionsUav: [
        { value: { title: '四旋翼', dllModel: 'MulticopterModel', px4SitlFrame: 'iris' }, text: '四旋翼' },
        { value: { title: '固定翼', dllModel: 'FixWingModel', px4SitlFrame: 'standard_plane' }, text: '固定翼' },
        { value: { title: '复合翼', dllModel: 'StandardVtolModel', px4SitlFrame: 'standard_vtol' }, text: '复合翼' }
      ],
      selectedOptionTask: {
        title: '自由飞行',
        content: '任务目标：选择地图、选择飞机 通过遥控器，完成基础起飞、自旋、平移、降落操作'
      },
      optionsTask: [
        {
          value: 'option1',
          text: { title: '自由飞行', content: '任务目标：选择地图、选择飞机 通过遥控器，完成基础起飞、自旋、平移、降落操作' }
        },
        {
          value: 'option2',
          text: {
            title: '航线规划',
            content: '任务目标：选择地图、选择飞机 通过遥控器，完成基础航点规划、上传任务、执行任务操作'
          }
        },
        { value: 'option3', text: { title: '目标侦察', content: '' } },
        { value: 'option3', text: { title: '目标打击', content: '' } }
      ]
    }
  },
  watch: {
    selectedOptionMap(newValue) {
      this.copterData.ueMap = newValue
    },
    selectedOptionUav(newValue) {
      this.copterData.title = newValue.title
      this.copterData.dllModel = newValue.dllModel
      this.copterData.px4SitlFrame = newValue.px4SitlFrame
    }
  },
  methods: {
    async handleClick(res) {
      await execPythonPath(
        this.inputValue
      ).then(res => {
        console.log(res)
      })
    },
    async openRflySim3D() {
      console.log('openRflySim3D')
      await ue4_open().then(
        res => console.log(res)
      )
    },
    async closeRflySim3D() {
      console.log('closeRflySim3D')
      await ue4_close().then(
        res => console.log(res)
      )
    },
    async openQGC() {
      console.log('openQGC')
      await qgc_open().then(
        res => console.log(res)
      )
    },
    async closeQGC() {
      console.log('closeQGC')
      await qgc_close().then(
        res => console.log(res)
      )
    },
    async execOpenCopterSim() {
      await execOpenCopterSim(this.copterData).then(
        res => console.log(res)
      )
    },
    async execCloseCopterSim() {
      await execCloseCopterSim().then(
        res => console.log(res)
      )
    },
    async execPythonPath() {
      await execPythonPath(this.pythonPath).then(
        res => console.log(res)
      )
    },
    async execPythonPath2() {
      await execPythonPath({
        fileUrl: 'D:\\PX4PSP\\RflySimAPIs\\MySITL\\py\\hello2.py',
        args: [this.copterData.ueMap]
      }).then(
        res => console.log(res)
      )
    },
    async execPythonPath3() {
      await execPythonPath({
        fileUrl: 'D:\\PX4PSP\\RflySimAPIs\\MySITL\\py\\server_ue4.py'
      }).then(
        res => console.log(res)
      )
    }
  }
}
</script>
